<template>
  <h3>选项式API</h3>
  <div>
    <div>
      {{ str }}
    </div>
    <hr />
    <div class="count">{{ count }}</div>
    <button type="button" @click="accCount">累加count的值</button>
    <hr />

    <p class="msg">{{ msg }}</p>
    <button type="button" @click="changeMsg">修改msg</button>
  </div>
</template>

<script>
const c = 100

//在外部函数内部无法使用this
function name2() {
  //这里的this是undef
  console.log(this)
}
export default {
  name: 'Study1DiyDemo1',
  data() {
    const str = '好好学习str'
    return {
      msg: str,
      count: c
    }
  },
  methods:{
    changeMsg(){
      this.msg = this.commomMethod()
    },
    accCount(){
      this.count++
    },
    commomMethod(){
      return this.count+this.msg
    }
  },
  computed:{},
  mounted(){}
}
</script>

<style></style>
